<template>
  <div class="manager-finance">
    <div class="page-header">
      <h1 class="page-title">财务管理</h1>
      <p class="page-subtitle">管理收支记录、报表统计和财务分析</p>
    </div>
    
    <div class="content-placeholder">
      <div class="placeholder-icon">💰</div>
      <h3>财务管理页面</h3>
      <p>功能开发中，敬请期待...</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  console.log('财务管理页面已加载')
})
</script>

<style scoped lang="scss">
.manager-finance {
  padding: 20px;
}

.page-header {
  margin-bottom: 40px;
  text-align: center;
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
  text-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.page-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

.content-placeholder {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  border-radius: 24px;
  padding: 80px 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.2),
    0 0 60px rgba(255, 255, 255, 0.1);

  .placeholder-icon {
    font-size: 64px;
    margin-bottom: 24px;
  }

  h3 {
    font-size: 24px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 12px;
  }

  p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
  }
}
</style>